<template>
  <div class="hs-table">
    <hot-table ref="htTable" :settings="currSetting" :data="data">
      <template v-for="(col, index) in columns">
        <hot-column :key="`${col.prop}_${col.type}_${index}`"
                    :title="col.label"
                    :data="col.prop"
                    :width="col.width"
                    :type="col.type"
                    :read-only="col.readonly"
                    v-bind="col.options"
        >
          <slot :name="col.prop" :column="col" :$index="index" :row="data[index]"></slot>
        </hot-column>
      </template>
    </hot-table>
  </div>
</template>

<script>
import { HotTable, HotColumn } from '@handsontable/vue'

export default {
  name: 'hs-table',
  cnName: 'handsome-table 列表对象使用',
  components: {
    HotTable,
    HotColumn
  },
  props: {
    columns: Array,
    data: Array,
    option: Object
  },
  data() {
    return {
      settings: {
        height: 'auto',
        contextMenu: true,
        rowHeaders: true,
        autoWrapRow: true,
        autoWrapCol: true,
        licenseKey: 'non-commercial-and-evaluation',
        language: 'zh-CN'
      }
    }
  },
  methods: {
    init() {
      this.initTb()
    },
    initTb() {
    }
  },
  watch: {
    data() {
      this.$refs.htTable.hotInstance.loadData(this.data)
    }
  },
  computed: {
    currSetting() {
      return {
        ...this.settings,
        ...this.option
      }
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.hs-table {
  position: relative;
  border-top: 1px solid #dfdfdf;
}
</style>
